import React, { useEffect } from "react";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import { Layout, Row, Col, Spin } from "antd";
import AlertLoginFailed from "../components/alert-login-failed";
import LoginForm from "../components/form/form-login";

const Page = () => {
  const { data: session, status } = useSession();
  const router = useRouter();
  // check if login falied
  const { error } = router.query;

  useEffect(() => {
    if (session && status === "authenticated") {
      router.push("/home");
    }
  });

  let pageContent;
  if (status === "loading") {
    pageContent = (
      <>
        <Spin />
      </>
    );
  } else {
    if (error) {
      pageContent = (
        <>
          <AlertLoginFailed /> <LoginForm />
        </>
      );
    } else {
      pageContent = (
        <>
          <LoginForm />
        </>
      );
    }
  }

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Row justify="center" align="middle" style={{ minHeight: "100vh" }}>
        <Col span={8}>{pageContent}</Col>
      </Row>
    </Layout>
  );
};

export default Page;
